<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.css">
</head>

<body>
    <div class="header-reg regwrap">
        <div class="searchBox">
            <ul class="searchtop">
                <li><a href="./login.html">点击登录</a>&nbsp;<i>|</i>&nbsp; </li>
                <li><a href="/ShopCart/CheckOut.aspx" rel="nofollow">购物车</a>&nbsp;<i>|</i>&nbsp; </li>
                <li><a href="#">官方微博</a>&nbsp;<i>|</i>&nbsp;
                </li>
                <li><a>订购热线:&nbsp;&nbsp;&nbsp;<span>400-884-1919</span> </a>
                </li>
            </ul>
        </div>

        <div class="clear">
        </div>

        <div class="search-center">
            <div class="logo float_left">
                <img src="../images/logo01.png" alt="">
            </div>
            <div class="logo1 float_left">
                <img src="../images/_tips2.jpg" alt="">
            </div>
            <div class="search_c">

                <div class="search_input">
                    <img src="../images/fdj.PNG" alt="">
                    <input type="text" id="txt">
                    <div id="btn"></div>
                </div>
            </div>
            <div class="search-r float_right">
                <img src="../images/tips3.jpg" alt="">
            </div>
        </div>
    </div>
    <div id="navList">
        <div class="navList regwrap">
            <div class="navList_l float_left">
                <div class="navH">
                    <p>商品分类</p>
                </div>
            </div>
            <div class="menu_list1 float_left">
                <ul>
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="#">列级名庄</a></li>
                    <li><a href="#">场合选酒</a></li>
                    <li><a href="#">活动专区</a></li>
                    <li><a href="#">积分商城</a></li>
                    <li><a href="#">店面展示</a></li>
                    <li><a href="#">招商加盟 </a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="useregBox regwrap">
        <div class="userreg ">
            <p>用户注册</p>
        </div>
    </div>
    <div class="boxform regwrap">
        <div class="formbox">

            <div class="formTxt">
                <p><span>*</span>用户名:</p>
                <input type="text" name="" id="userId">
                <span></span>
            </div>
            <div class="formTxt">
                <p><span>*</span>手机号码:</p>
                <input type="text" name="" id="phoneNum" value="">
                <i> </i>

            </div>
            <div class="formTxt">
                <p><span>*</span>验证码:</p>
                <input type="text" name="" id="yzm">
                <input type="text" id="yzm1" value="a121">
                <span></span>

            </div>
            <div class="formTxt">
                <p><span>*</span>请设置密码:</p>
                <input type="text" name="" id="btnReg">
            </div>
            <div class="formTxt">
                <p><span>*</span>重新输入密码:</p>
                <input type="text" name="" id="newbtnReg">
                <span></span>
            </div>

            <h3 class="float_left"> <input type="checkbox" checked>我已阅读并同意《一九在线交易条款》</h3>
            <button id="btn1">
                完成注册
            </button>
            <div id="message-box">


            </div>


            <!-- </table> -->
        </div>
    </div>
    <!-- 1 -->
    <div class="footer-wrap1 regwrap">
        <div class="footerCenter1">
            <ul class="footCenter1_l">
                <li>
                    <h3>购物指南</h3>
                    <p><a href="#">购物演示</a></p>
                    <p><a href="#">新用户注册</a></p>
                    <p><a href="#">会员积分</a></p>

                </li>
                <li>
                    <h3>支付帮助</h3>
                    <p><a href="#">在线支付</a></p>
                    <p><a href="#">货到付款</a></p>
                    <p><a href="#">银行转账</a></p>
                    <p><a href="#">支票支付</a></p>
                    <p><a href="#">发票说明</a></p>
                </li>
                <li>
                    <h3>配送服务</h3>
                    <p><a href="#">运费收取标准</a></p>
                </li>
                <li>
                    <h3>售后服务</h3>
                    <p><a href="#">服务保障承诺</a></p>
                    <p><a href="#">如何办理退换货</a></p>
                </li>

            </ul>
            <div class="footerCenter1_r float_right">
                <img src="../images/telinfo.gif" alt="">

            </div>

        </div>
    </div>

    <div class="bottomLinks regwrap">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#"> 帮助中心</a>
        <a href="#">友情链接</a>
        <a href="#">人才招聘</a>
        <a href="#">招商加盟</a>
    </div>

    </div>
    <div class="footlast regwrap">
        <p>copyright © 2009-2018 www.19online.cn | 经营许可证：粤b2-20080416|粤icp备：06088898号</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(".search_input").on("click", function (e) {
            $("#txt").css({
                display: "block"
            })
        })
        var num = Math.round(parseInt("ffff", 16) * Math.random()).toString(16).padStart(4, "0");
        $("#yzm1").val(num)
        var reg = /^1[3,5,7,8,9]\d{9}$/
        var reg2 = /^[^\s]{4,10}$/


        var value
        //  function abc(){
        $("#phoneNum").on("blur", function () {
            value = this.value;
            if (!reg.test(value) && value !== '') {
                $("#phoneNum").next()
                    .html("手机号格式错误")
                    .css({
                        "color": "red",
                        "font-size": 12
                    });
            }

        })


        //  }

        // var value
        // document.querySelector("#phoneNum").onblur = function(){
        //         value = this.value;       
        //         if (!reg.test(value) && value !== '') {
        //             $("#phoneNum").next()
        //                 .html("手机号格式错误")
        //                 .css({
        //                     "color": "red",
        //                     "font-size": 12
        //                 });
        //         } 

        // }



        var value1;
        $("#yzm").on("blur", function () {
            var res = document.querySelector('#yzm1').value
            value1 = this.value;
            if (value1 !== res && value1 !== '') {
                $("#yzm").next().next()
                    .html("验证码不一致")
                    .css({
                        "color": "red",
                        "font-size": 12
                    });
            }

        });
        var valueP;
        $("#btnReg").on("blur", function () {
            valueP = this.value;

        })
        $("#newbtnReg").on("blur", function () {
            valuePass1 = this.value;
            if (valueP === valuePass1 && valuePass1 !== '') {
                $("#newbtnReg").next()
                    .html("密码一致")
                    .css({
                        "color": "green",
                        "font-size": 12
                    });
            }
            else if (valueP !== valuePass1) {
                $("#newbtnReg").next()
                    .html("两次密码不一致")
                    .css({
                        "color": "red",
                        "font-size": 12
                    });
            }
        })
        $("#userId").on("input", function () {
            $("#userId").next().html("");
        }
        )
        $("#phoneNum").on("input", function () {
            $("#phoneNum").next().html("");
        }
        )
        $("#yzm").on("input", function () {
            $("#yzm").next().next().html("");
        }
        )
        $("#newbtnReg").on("input", function () {
            $("#newbtnReg").next().html("");
        }
        )

        // if()
        /* ajax */
        $("#userId").blur(function () {
            //$.get()函数发送的是get请求
            $.get(
                "01_select.php",
                { "username": this.value },
                (str) => {
                    var arr = []
                    var res = JSON.parse(str)
                    for (var i = 0; i < res.length; i++) {
                        arr.push(res[i].username);
                    };
                    if (arr.indexOf(this.value) == -1) {
                        $("#userId").next().html("用户名没有人使用，请注册").css({
                            "color": "green",
                            "font-size": 12
                        })
                    }
                    else if (arr.indexOf(this.value) !== -1 && this.value !== '') {
                        $("#userId").next().html("用户名已存在，请重新思考").css({
                            "color": "red",
                            "font-size": 12
                        });
                    }
                }
            )
        })

        // $("#userId").on("blur", function () {
        //     console.log(this.value)
        // })


        // function change(id) {

        // }
        // var fn = $("#userId").on("blur", function () {
        //     return this.value
        // })






        $("#btn1").click(function () {


            $.post(
                "02_insert.php",
                {
                    "username": $("#userId").val(),
                    "userpass": $("#btnReg").val(),
                },
                function (str) {
                    if (str == "1" && $("#userId").val() !== "" && $("#btnReg").val() !== "") { //注册成功
                        alert("注册成功");
                        $(".formTxt input").val('');
                        $("#yzm1").val(num)

                            ;
                    } else {
                        $("#message-box").html("注册失败").css({
                            "color": "red",
                            "font-size": 12,
                            "padding-left": 220,
                            "padding-top": 5
                        });
                    }
                }
            );
        }
        );




        // }

    </script>
</body>

</html>